<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<TITLE>Write Web Editor PluginWrite Web Editor Plugin - Kind Editor-Web WYSIWYG Online Editor</TITLE>
<link href="prettify.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
  <div class="right">
     <h2>Kind Editor Documentation</h2>
     <ul>
       <li>
         <a href="add-editor-to-your-web-page.html">Add Editor To Your Web Page</a>
         </li><li>
         <a href="editor-attributes-for-customization.html">Editor Attributes For Customization</a>
         </li><li>
         <a href="faq.html">FAQ</a>
         </li><li>
         <a href="kind-editor-api.html">Kind Editor API</a>
         </li><li>
         <a href="write-web-editor-plugin.html">Write Web Editor Plugin</a>
         </li>     </ul>
  </div>
  <div><h1 class="standalone">Write Web Editor Plugin</h1></div>
  <div class="main">
   <div class="left">
    <dl>
     <p><div class="margin-20">
<div class="myblock">
<div class="header">Hello World Plugin</div>
<ol>
    <li>Step 1: Define KE.lang['hello'] = &quot;Hello World&quot;.
    <pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'hello'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">&quot;HelloWorld&quot;</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    </li>
    <li>Step 2: Define plugin logic in KE.plugin['hello']. This plugin will pop up a message when end user clicks on tool button.
    <pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">plugin</span><span class="pun">[</span><span class="str">'hello'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; click </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">id</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; alert</span><span class="pun">(</span><span class="str">&quot;Hello, the world&quot;</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br /></span><span class="pun">};</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    </li>
    <li>Step 3: Define image for tool button in CSS file.
    <pre class="prettyprint"><span class="pun">.</span><span class="pln">ke</span><span class="pun">-</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">hello </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; background</span><span class="pun">-</span><span class="pln">image</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(.</span><span class="str">/skins/</span><span class="kwd">default</span><span class="pun">.</span><span class="pln">gif</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; background</span><span class="pun">-</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0px</span><span class="pln"> </span><span class="pun">-</span><span class="lit">672px</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"><br /></span><span class="pun">}</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    </li>
    <li>Step 4: Let editor show this plugin within tool bar.
    <pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">show</span><span class="pun">({</span><span class="pln"><br />&nbsp; &nbsp; id </span><span class="pun">:</span><span class="pln"> </span><span class="str">'content1'</span><span class="pun">,</span><span class="pln"><br />&nbsp; &nbsp; items </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'hello'</span><span class="pun">]</span><span class="pln"><br /></span><span class="pun">});</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    See <a target="_blank" href="http://www.kindeditor.com/examples/web-editor-customized-plugin.html">this demo</a>.</li>
</ol>
</div>
</div>
<div class="margin-20">
<div class="myblock">
<div class="header">Remote Image Plugin</div>
<ol>
    <li>Step 1: Define language KE.lang['remote_image'] = &quot;Insert remote image&quot;.
    <pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'remote_image'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">&quot;Insert Remote Image&quot;</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    </li>
    <li>Step 2: Define logic.
    <pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">plugin</span><span class="pun">[</span><span class="str">'remote_image'</span><span class="pun">]</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; click </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">id</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="pln">selection</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> dialog </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">dialog</span><span class="pun">({</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id </span><span class="pun">:</span><span class="pln"> id</span><span class="pun">,</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cmd </span><span class="pun">:</span><span class="pln"> </span><span class="str">'remote_image'</span><span class="pun">,</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width </span><span class="pun">:</span><span class="pln"> </span><span class="lit">310</span><span class="pun">,</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height </span><span class="pun">:</span><span class="pln"> </span><span class="lit">90</span><span class="pun">,</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title </span><span class="pun">:</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'image'</span><span class="pun">],</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yesButton </span><span class="pun">:</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'yes'</span><span class="pun">],</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; noButton </span><span class="pun">:</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'no'</span><span class="pun">]</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">});</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; dialog</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; </span><span class="pun">},</span><span class="pln"><br />&nbsp; &nbsp; check </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">id</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> dialogDoc </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="pln">getIframeDoc</span><span class="pun">(</span><span class="pln">KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">dialog</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> url </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'url'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> title </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgTitle'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> width </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgWidth'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> height </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgHeight'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> border </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgBorder'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">url</span><span class="pun">.</span><span class="pln">match</span><span class="pun">(</span><span class="str">/\.(jpg|jpeg|gif|bmp|png)$/</span><span class="pln">i</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert</span><span class="pun">(</span><span class="pln">KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'invalidImg'</span><span class="pun">]);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">yesButton</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">width</span><span class="pun">.</span><span class="pln">match</span><span class="pun">(</span><span class="str">/^\d+$/</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert</span><span class="pun">(</span><span class="pln">KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'invalidWidth'</span><span class="pun">]);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">yesButton</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">height</span><span class="pun">.</span><span class="pln">match</span><span class="pun">(</span><span class="str">/^\d+$/</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert</span><span class="pun">(</span><span class="pln">KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'invalidHeight'</span><span class="pun">]);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">yesButton</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">border</span><span class="pun">.</span><span class="pln">match</span><span class="pun">(</span><span class="str">/^\d+$/</span><span class="pun">)</span><span class="pln"> </span><span class="pun">==</span><span class="pln"> </span><span class="kwd">null</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert</span><span class="pun">(</span><span class="pln">KE</span><span class="pun">.</span><span class="pln">lang</span><span class="pun">[</span><span class="str">'invalidBorder'</span><span class="pun">]);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">yesButton</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">();</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; </span><span class="pun">},</span><span class="pln"><br />&nbsp; &nbsp; </span><span class="kwd">exec</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">id</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="kwd">select</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> iframeDoc </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">iframeDoc</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> dialogDoc </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="pln">getIframeDoc</span><span class="pun">(</span><span class="pln">KE</span><span class="pun">.</span><span class="pln">g</span><span class="pun">[</span><span class="pln">id</span><span class="pun">].</span><span class="pln">dialog</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(!</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">check</span><span class="pun">(</span><span class="pln">id</span><span class="pun">))</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> url </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'url'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> title </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgTitle'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> width </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgWidth'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> height </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgHeight'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> border </span><span class="pun">=</span><span class="pln"> KE</span><span class="pun">.</span><span class="pln">$</span><span class="pun">(</span><span class="str">'imgBorder'</span><span class="pun">,</span><span class="pln"> dialogDoc</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">insert</span><span class="pun">(</span><span class="pln">id</span><span class="pun">,</span><span class="pln"> url</span><span class="pun">,</span><span class="pln"> title</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; </span><span class="pun">},</span><span class="pln"><br />&nbsp; &nbsp; insert </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">id</span><span class="pun">,</span><span class="pln"> url</span><span class="pun">,</span><span class="pln"> title</span><span class="pun">,</span><span class="pln"> width</span><span class="pun">,</span><span class="pln"> height</span><span class="pun">,</span><span class="pln"> border</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">var</span><span class="pln"> html </span><span class="pun">=</span><span class="pln"> </span><span class="str">'<img alt="" pln="" src="'&lt;/span&gt;&lt;span class=" /></span> <span class="pun">+</span><span class="pln"> url </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&quot; '</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">width </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> html </span><span class="pun">+=</span><span class="pln"> </span><span class="str">'width=&quot;'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> width </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&quot; '</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">height </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> html </span><span class="pun">+=</span><span class="pln"> </span><span class="str">'height=&quot;'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> height </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&quot; '</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">title</span><span class="pun">)</span><span class="pln"> html </span><span class="pun">+=</span><span class="pln"> </span><span class="str">'title=&quot;'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> title </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&quot; '</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; html </span><span class="pun">+=</span><span class="pln"> </span><span class="str">'alt=&quot;'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> title </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&quot; '</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; html </span><span class="pun">+=</span><span class="pln"> </span><span class="str">'border=&quot;'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> border </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&quot; /&gt;'</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="pln">insertHtml</span><span class="pun">(</span><span class="pln">id</span><span class="pun">,</span><span class="pln"> html</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">layout</span><span class="pun">.</span><span class="pln">hide</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; KE</span><span class="pun">.</span><span class="pln">util</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">(</span><span class="pln">id</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; </span><span class="pun">}</span><span class="pln"><br /></span><span class="pun">};</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    </li>
    <li>Step 3: Define image for tool button in CSS file.
    <pre class="prettyprint"><span class="pun">.</span><span class="pln">ke</span><span class="pun">-</span><span class="pln">icon</span><span class="pun">-</span><span class="pln">remote_image </span><span class="pun">{</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; background</span><span class="pun">-</span><span class="pln">image</span><span class="pun">:</span><span class="pln"> url</span><span class="pun">(.</span><span class="str">/skins/</span><span class="kwd">default</span><span class="pun">.</span><span class="pln">gif</span><span class="pun">);</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; background</span><span class="pun">-</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0px</span><span class="pln"> </span><span class="pun">-</span><span class="lit">496px</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"><br /></span><span class="pun">}</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    </li>
    <li>Step 4: Let editor show this plugin within tool bar.
    <pre class="prettyprint"><span class="pln">KE</span><span class="pun">.</span><span class="pln">show</span><span class="pun">({</span><span class="pln"><br />&nbsp; &nbsp; id </span><span class="pun">:</span><span class="pln"> </span><span class="str">'content1'</span><span class="pun">,</span><span class="pln"><br />&nbsp; &nbsp; items </span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'remote_image'</span><span class="pun">]</span><span class="pln"><br /></span><span class="pun">});</span><span class="pln"><br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre>
    See <a target="_blank" href="http://www.kindeditor.com/examples/web-editor-remote-picture-plugin.html">this demo</a> in action.</li>
</ol>
</div>
</div></p>
    </dl>
   </div>
  </div>
  <div class="footer">
     <div class="copyright"> 
       <span class="r">Copyright &copy; 2005-2009 Kindsoft LLC, All Rights Reserved.
     </div>
  </div>

</div>
</body>
</html>